<template>
	<view class="width w-table">
		<view
			v-if="tableData.length > 0"
			class="w-flex col item-list marginB20 marginLR20 radius8 relative"
			v-for="(item, index) in tableData"
			:key="index">
			<slot name="header" :row="item" :index="index"></slot>
			<view class="width w-flex col paddingT15">
				<!-- <u-read-more class="width" :toggle="true" closeText="更多" :showHeight="showHeight" color="#4E5969"> -->
					<u-cell-group>
						<template v-for="(cellItem,i) in propList">
							<template v-if="!cellItem.formatItem">
								<!-- 默认展示 show为true时  或者 不需要折叠时执行展示列 -->
								<view class="default-show" v-if="cellItem.show || !toggle">
									<u-cell-item :title="cellItem.label" :key="i" :arrow="false">
										<slot v-if="typeof cellItem.formatValue === 'boolean' ? cellItem.formatValue : false"
											:row="item" :name="cellItem.prop" :index="index"></slot>
										<text v-else>{{$util.formatTextEmpty(item[cellItem.prop])}}</text>
									</u-cell-item>
								</view>
								<!-- 默认不展示 -->
								<view class="default-notshow" v-if="!cellItem.show && item.isShow">
									<u-cell-item :title="cellItem.label" :key="i" :arrow="false">
										<slot v-if="typeof cellItem.formatValue === 'boolean' ? cellItem.formatValue : false"
											:row="item" :name="cellItem.prop" :index="index"></slot>
										<text v-else>{{$util.formatTextEmpty(item[cellItem.prop])}}</text>
									</u-cell-item>
								</view>
							</template>
							<template v-if="cellItem.formatItem">
								<!-- 整体插槽列默认展示 -->
								<slot v-if="cellItem.show" :name="cellItem.prop" :row="item" :index="index"></slot>
								<!-- 整体插槽列默认不展示 并且 列表展开时展示 -->
								<slot v-if="!cellItem.show && item.isShow" :name="cellItem.prop" :row="item" :index="index"></slot>
							</template>
						</template>
						<view v-show="toggle" class="width padding20 textCenter">
							<span v-show="!item.isShow" @click="toggleCell(index,true)">更多<u-icon name="arrow-down" class="marginL5"></u-icon></span>
							<span v-show="item.isShow" @click="toggleCell(index,false)">收起<u-icon name="arrow-up" class="marginL5"></u-icon></span>
						</view>
					</u-cell-group>
				<!-- </u-read-more> -->
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		props:{
			tableData:{
				default:[],
				type:Array,
			},
			propList:{
				default:[],
				type:Array,
			},
			showHeight:{
				default:500,
				type:Number,
			},
			toggle:{
				default:true,
				type:Boolean,
			}
		},
		data(){
			return{
				
			}
		},
		mounted(){
			if(this.toggle){
				// 可以展开收起时，给表格默认增加isShow属性
				this.tableData.forEach(item=>{
					this.$set(item,'isShow',!this.toggle)
				})
			}else{
				// 不需要收缩功能时，每一列数据默认是true，即展示，
				// 也就是toggle为false时，propList设置show属性无效，均为true
				this.propList.forEach(item=>{
					this.$set(item,'show',!this.toggle)
				})
			}
		},
		methods:{
			toggleCell(i,value){
				this.$set(this.tableData[i],'isShow',value)
			}
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep.u-cell{
		align-items: flex-start;
	}
	::v-deep.u-cell-box{
		text-indent: initial;
	}
	::v-deep.w-table .u-content__showmore-wrap{
		background-image:none !important;
	}
	::v-deep.w-table .u-cell_title{
		width: 90px !important;
		flex: none;
		font-size: 13px !important;
	}
	::v-deep.w-table .u-cell__value{
		text-align: left !important;
		overflow-wrap: break-word;
	}
</style>
